<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安全设置</title>
    <style>
        .flex {
            display: flex;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }

        .flex-column {
            display: flex;
            flex-direction: column;
        }

        .flex-center {
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div style="margin-left: 6px;padding: 16px 0 ;">
    <h5 style="border-left: 2px solid #88B7E0;">&nbsp;&nbsp;安全设置</h5>
</div>
<fieldset class="layui-elem-field layui-field-title"></fieldset>
<div class="flex-row" style="width: 50%;">
    <div class="flex flex-center" style="width: 20%;">
        <img width="100px" height="100px" id="avatar" src="" alt="头像">
    </div>
    <div class="flex-column" style="width: 70%;justify-content: space-between;align-items: flex-start;">
        <div class="flex-row">
            <label>登录账号:</label>
            <div id="username"></div>
        </div>
        <div class="flex-row">
            <label>账号ID:</label>
            <div id="userId"></div>
        </div>
        <div class="flex-row">
            <label>注册时间:</label>
            <div id="registTime">2017年1月20日 下午2:05:00</div>
        </div>
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title"></fieldset>
<div class="flex-row" style="justify-content: space-between;align-items: center;text-align: center;">
    <div style="width: 10%;">登录密码</div>
    <div style="width: 60%;text-align: left;">安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。</div>
    <div style="width: 20%;"><a href="/account/#!changepass" style="color:blue;">修改</a></div>
</div>
<fieldset class="layui-elem-field layui-field-title"></fieldset>
<div class="flex-row" style="justify-content: space-between;align-items: center;text-align: center;">
    <div style="width: 10%;">绑定手机</div>
    <div style="width: 60%;text-align: left;" id="phone"></div>
    <div style="width: 20%;"><a href="/account/#!changephone" style="color:blue;">修改</a></div>
</div>
<fieldset class="layui-elem-field layui-field-title"></fieldset>
</body>
<script>
    var methods;
    layui.use(['form', 'tools'], function () {
        var tools = layui.tools;
        var $ = layui.$;
        methods = {
            getData() {
                //表单赋值
                tools.request({
                    url: '/plm/user/accountInfo',
                    method: "post"
                }).done(function (res) {
                    if (res.code == 0) {
                        $("#avatar").attr('src', res.data.avatar);
                        $("#username").html(res.data.realName);
                        $("#userId").html(res.data.username);
                        $("#registTime").html(res.data.registTime);
                        if (res.data.phone) {
                            $("#phone").html("您已绑定了手机<span style=\"color:green\">" + res.data.phone + "</span>[您的手机号可以直接用于登录、找回密码等]");
                        } else {
                            $("#phone").html("您还未绑定手机号,请及时绑定手机号![您的手机号可以直接用于登录、找回密码等]");
                        }

                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                });
            }
        }
        methods.getData();
    });
</script>
</html>